<template>
  <div class="bg-white">
    <!-- 头部导航 -->
    <div class="bg-gray">
      <div class="container clearfix">
        <ul class="fl headNav-left clearfix">
          <li class="mgr-40"><router-link to="/">欢迎来到绿采</router-link></li>
          <li class="mgr-10"><router-link to="/Login" v-show="isloginflag">请登录</router-link><a href="javascript:void(0);" @click="outLogin()" v-show="!isloginflag">退出登录</a></li>
          <li class="headnav-line"></li>
          <!-- <li class="mgl-10"><router-link to="Register_person">免费注册</router-link></li> -->
          <li class="mgl-10 mgr-10"><router-link to="Register_new">免费注册</router-link></li>
          <li class="headnav-line"></li>
          <!-- <li class="mgl-10"><router-link to="Register_person">免费注册</router-link></li> -->
          <li class="mgl-10"><a href="javascript:void(0);">退出登录</a></li>
        </ul>
        <ul class="fr headNav-right clearfix">
          <li><router-link to="Usercenter">我在绿采</router-link></li>
          <li><router-link to="">客服中心</router-link></li>
          <li><router-link to="">绿采助手</router-link></li>
          <li><router-link to="">网站导航</router-link></li>
          <li><router-link to="">400-123-456</router-link></li>
        </ul>
      </div>
    </div>
    <!-- 头部搜索 -->
    <div class="container">
      <div class="topSearch clearfix">
        <div class="fl topSearch-logo"><img src="../../../static/images/img/logo.png" alt=""></div>
        <div class="fl mgt-20">
          <ul class="topSearch-tilte clearfix">
            <li @click="cur=0" :class="{active:cur==0}">绿色供应商</li>
            <li @click="cur=1" :class="{active:cur==1}">绿色材料</li>
            <li @click="cur=2" :class="{active:cur==2}">绿色认证</li>
            <li @click="cur=3" :class="{active:cur==3}">招标招募</li>
          </ul>
          <div class="topSearch-content">
              <div v-show="cur==0">
                <el-form method="post" class="search-form fl" ref="formInline">
                  <el-form-item prop="username">
                    <el-input placeholder="搜索供应商" class="input-with-select">
                      <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                    <!-- <el-input placeholder="搜索供应商">
                      <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input> -->
                  </el-form-item>
                </el-form>
                <div class="topSearch-publish fl">
                  <button>咨询报价</button>
                </div>
              </div>
              <div v-show="cur==1">
                <el-form method="post" class="search-form fl" ref="formInline">
                  <el-form-item prop="username">
                    <el-input placeholder="搜索绿色材料">
                      <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                  </el-form-item>
                </el-form>
                <div class="topSearch-publish fl">
                  <button>咨询报价</button>
                </div>
              </div>
              <div v-show="cur==2">
                <el-form method="post" class="search-form fl" ref="formInline">
                  <el-form-item prop="username">
                    <el-input placeholder="搜索绿色认证">
                      <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                  </el-form-item>
                </el-form>
                <div class="topSearch-publish fl">
                  <button>咨询报价</button>
                </div>
              </div>
              <div v-show="cur==3">
                <el-form method="post" class="search-form fl" ref="formInline">
                  <el-form-item prop="username">
                    <el-input placeholder="搜索招标招募">
                      <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                  </el-form-item>
                </el-form>
                <div class="topSearch-publish fl">
                  <button>咨询报价</button>
                </div>
              </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 菜单导航 -->
    <div class="bg-blue">
      <div class="container">
        <ul class="clearfix navList">
          <li class="navList-type relative"><i></i>行业分类</li>
          <li><router-link to="/">首页</router-link></li>
          <li><router-link to="Blueshop">绿采供应链</router-link></li>
          <li><router-link to="Blueauth">绿采认证</router-link></li>
          <li><router-link to="">招标招募</router-link></li>
          <li><router-link to="">绿采智库</router-link></li>
          <!-- <li><router-link to="Blueinfo">绿采资讯</router-link></li> -->
          <li><router-link to="Bluenews">绿采资讯</router-link></li>
          <li><router-link to="">全球绿产品</router-link></li>
          <li><router-link to="">绿色项目</router-link></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'Headnav',
  data(){
    return{
      // activeName: 'first'
      cur:0 ,//默认选中第一个tab
      token:'',
      islogin:sessionStorage.setItem('islogin','false'),
      isloginflag:sessionStorage.getItem('islogin')
    }
  },
  methods: {
    outLogin () {
      this.$alert('是否确认退出登录', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
          }).then(() => {
          axios.post('/auth/logout',{token: sessionStorage.getItem('logintoken')})
          .then((res) => {
            res = res.data
            if(res.code == 200) {
              this.$message(res.response),
              sessionStorage.setItem('islogin','false')
            } else{
              this.$message(res.response)
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出'
          }); 
        });
    },
  }
}
</script>


<style>
 @import '../../../static/style/Headnav';
</style>


